<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="质量数据趋势" name="first">
          <dataTrend :list="sectionList"></dataTrend>
        </el-tab-pane>
        <el-tab-pane label="质量问题分类" name="second">
          <problemClassification></problemClassification>
        </el-tab-pane>
        <el-tab-pane label="质量问题分布" name="third">
          <problemDistribution :list="sectionList"></problemDistribution>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
import dataTrend from './components/dataTrend'
import problemClassification from './components/problemClassification'
import problemDistribution from './components/problemDistribution'
import { checkWorkSecInfo } from '@/api/workSection.js'
export default {
    name: 'problemAnalysis',
    components: { dataTrend, problemClassification, problemDistribution },
    data () {
        return {
          activeName: 'first',
          userInfo: this.$store.state.user.userInfo,
          sectionList:[]
        }
    },
    computed: {
      
    },
    methods: {
      async checkWorkSecInfo(){
        const res = await checkWorkSecInfo({page:1,limit:10000})
        this.sectionList = res.data.records
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    // 进入页面获取table信息
    mounted() {
      this.checkWorkSecInfo()
    }
}
</script>

<style>

.btn-add{
    margin-bottom: 28px;
}

.ul-item{
  width: 85%;
}
</style>
